<template>
  <el-dialog title="回单"
             top="20vh"
             width="600px"
             class="dialog-box"
             append-to-body
             :visible="visible"
             :close-on-click-modal="false"
             @update:visible="handleVisible">
    <ReceiptForm v-model="receipt"
                 :hidden-fields="hiddenFields" />
    <!-- <thumbnails checkable /> -->
    <el-form ref="ruleForm"
             label-width="110px"
             :model="form">
      <el-form-item label="上传回单照片"
                    prop="receiptPics">
        <OrderReceiptPics :value="value"
                          :is-all="0"
                          @uploadProgress="uploadProgress"
                          @files="handleReceiptPicsInput" />
      </el-form-item>
      <el-form-item label="复核延期原因"
                    prop="delayReason">
        <el-radio-group v-model="form.delayReason">
          <el-radio :label="0">无延期</el-radio>
          <el-radio :label="1">正常延期</el-radio>
          <el-radio :label="2">客户要求</el-radio>
          <el-radio :label="3">商务要求</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否拒签"
                    prop="exception">
        <el-radio-group v-model="form.exception">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <span v-if="form.exception">
        <el-form-item label="拒签数"
                      prop="exceptionNum">
          {{form.exceptionNum}}
        </el-form-item>
        <el-form-item label="拒签照片"
                      prop="receiptRefusePics">
          <OrderReceiptPics :value="value"
                            :is-all="isAll"
                            @uploadProgress="uploadProgress"
                            @files="handleRefuseReceiptPicsInput" />
        </el-form-item>
      </span>
    </el-form>
    <div slot="footer">
      <el-button type="default"
                 @click="handleClose">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 :disabled="submitButtonDisabled"
                 @click="handleSubmit">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import OrderMixin from "./order.mixin";
import ReceiptForm from "@/components/basic/ReceiptForm.vue";
import OrderReceiptPics from "@/components/order/OrderReceiptPics";
export default {
  name: "OrderReceiptSubmit",
  components: { ReceiptForm, OrderReceiptPics },
  mixins: [OrderMixin],
  props: {
    value: Object,
    fulfill: Function,
    visible: Boolean,
    goodsList: Array,
    beforeSubmit: Function,
    isAll: Boolean,
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      hiddenFields: ["syncUpAttachments"],
      receipt: {
        receiptDesc: "",
        receiptType: 0,
        receiptTime: this.$moment(new Date()).format("YYYY-MM-DD 23:59:00"),
        receiptSignTime: null
      },
      submitButtonDisabled: null,
      form: {
        delayReason: null,
        receiptPics: [],
        receiptRefusePics: [],
        exception: 0,
        exceptionNum: 0,
      }
    };
  },
  computed: {
    receiptSignTime () {
      return this.order?.signTime;
    },
    delayReason () {
      return this.order?.sign?.delayReason;
    }
  },
  watch: {
    receiptSignTime () {
      this.$nextTick(() => {
        this.receipt.receiptSignTime = this.receiptSignTime;
      });
    },
    delayReason () {
      this.$nextTick(() => {
        this.form.delayReason = this.delayReason;
      });
    },
    goodsList () {
      this.$nextTick(() => {
        let totalexceptionQuantity = 0;
        this.goodsList.length && this.goodsList.map(item => {
          if (item.exceptionQuantity) {
            let refuseTotalNum = 0;
            item.rejects.length && item.rejects.map(item => {
              refuseTotalNum += Number(item.quantity);
            })
            totalexceptionQuantity += Number(refuseTotalNum);
          }
        })
        this.form.exceptionNum = totalexceptionQuantity;
      });
    }
  },
  created () {
    this.receipt.receiptSignTime = this.receiptSignTime;
    this.form.delayReason = this.delayReason;
  },
  methods: {
    handleReceiptPicsInput (receiptPics) {
      this.form.receiptPics = receiptPics;
      // this.submitButtonDisabled = false
    },
    uploadProgress (value) {
      this.submitButtonDisabled = value
    },
    handleRefuseReceiptPicsInput (receiptRefusePics) {
      this.form.receiptRefusePics = receiptRefusePics;
    },
    handleBeforeSubmit () {
      if (typeof this.beforeSubmit !== "function") {
        return true;
      }
      return this.beforeSubmit(this.receipt);
    },
    handleClose () {
      this.$emit("update:visible", false);
    },
    handleVisible (visible) {
      this.$emit("update:visible", visible);
    },
    handleInput (receipt) {
      this.receipt = receipt;
    },
    handleSubmit () {
      if (!this.receiptSignTime) {
        this.$message.warning("签收时间不能为空！");
        return;
      }
      if (!this.handleBeforeSubmit()) {
        console.log("Handle before submit false", JSON.stringify(this.receipt));
        return;
      }

      this.$emit("submit", { ...this.receipt, ...this.form });
    }
  }
};
</script>
<style scoped>
.dialog-box >>> .el-dialog__body {
  max-height: 560px !important;
  overflow: auto !important;
}
</style>
